<template>
	<view class="common-page-box">
		<view class="price-item flex-form-item">
			<view>商品名称</view>
			<view class="form-input">
				<u-input placeholder="请输入商品名称" v-model="formData.goodName" maxlength="10"></u-input>
			</view>
		</view>

		<view class="form-item bottom-border">
			<u--textarea v-model="formData.describe" placeholder="请输入商品描述" height="200"></u--textarea>
		</view>
		<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select" @progress="progress"
			@success="success" @fail="fail" :limit="4" return-type="array" />
		<view class="classify-item flex-form-item bottom-border">
			<view class="classify">类别选择</view>
			<uni-data-select v-model="formData.classification" :localdata="range" @change="change"
				placeholder="请选择商品类别"></uni-data-select>
		</view>
		<view class="price-item flex-form-item">
			<view>价格(￥)</view>
			<view class="form-input">
				<u-input type="number" placeholder="请输入价格" v-model="formData.price"></u-input>
			</view>
		</view>
		<view class="btn-box" @click="submitForm">
			<view class="btn">发布</view>
		</view>
		<!-- <button @click="addGood">添加商品</button> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		computed: {
			...mapState('buji_search', ['good_id']),
		},

		data() {
			return {
				time: 3, //跳转到首页的计时器
				timre: null, //声明定时器
				id: "",
				range: [{
						value: "1",
						text: "鞋帽服饰"
					},
					{
						value: "2",
						text: "学习用品"
					},
					{
						value: "3",
						text: "交通工具"
					},
					{
						value: "4",
						text: "电子产品"
					},
					{
						value: "5",
						text: "生活用品"
					},
					{
						value: "6",
						text: "其他"
					}
				],
				formData: {
					goodName: '',
					describe: "",
					classification: "",
					price: "",
					imageValue: [],
				}
			}
		},
		onLoad(options) {
			this.id = options.id || ""; // 有ID的话 说明是编辑的状态，没有则是新增状态
			console.log("*****************", this.id);
		},
		methods: {
			...mapMutations('buji_search', ['updateGoodId']),

			// 获取上传状态
			select(e) {
				console.log('选择文件：', e.tempFilePaths[0])
				this.formData.imageValue.push(e.tempFilePaths[0])
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				uni.showToast({
					icon: 'falied',
					title: '上传失败'
				})
			},

			change(e) {
				console.log("e:", e);
				this.formData.classification = e
			},
			input(e) {
				console.log('输入内容：', e);
			},
			submitForm() {
				if (this.formData.goodName == '' ||
					this.formData.price == '' ||
					this.formData.describe == '' ||
					this.formData.classification == '' ||
					this.formData.imageValue == []) {
					uni.showToast({
						icon: 'error',
						title: '请完善商品信息'
					});
				} else {
					this.issueGood()
				}
			},
			issueGood() {
				console.log("bg", this.good_id);
				console.log("******************", this.formData);
				wx.cloud.callFunction({
					name: 'issueGood',
					// complete: res => {
					// 	 console.info('complete', res);
					// },
					data: {
						avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc35f8d98-a574-4257-83b4-1b731f5d66b8%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682819365&t=8dddf5e06f60a266abd1217b2124a3db",
						classify_id: this.formData.classification,
						goods_id: this.good_id,
						goods_name: this.formData.goodName,
						introduce: this.formData.describe,
						pic: this.formData.imageValue,
						price: this.formData.price,
						time: new Date(),
					},
					success: res => {
						console.log('success', res);
						uni.showToast({
							icon: 'success',
							title: '发布成功'
						})
						this.timer = setInterval(() => {
							this.time--
							// 2. 判断秒数是否 <= 0
							if (this.time <= 0) {
								// 2.1 清除定时器
								clearInterval(this.timer)
								this.formData.goodName = '',
									this.formData.price = '',
									this.formData.describe = '',
									this.formData.classification = '',
									this.formData.imageValue = [],
									uni.switchTab({
										url: '/pages/index/index'
									})
							}
						}, 1000)
					},
					fail: res => {
						console.info('fail', res);
					}
				});
				this.updateGoodId();
				console.log("ed", this.good_id);
			},
			// addGood() {
			// 	console.log("bg", this.good_id);
			// 	console.log("******************", this.formData);
			// 	wx.cloud.callFunction({
			// 		name: 'issueGood',
			// 		// complete: res => {
			// 		// 	 console.info('complete', res);
			// 		// },
			// 		data: {
			// 			avatar: "https://img0.baidu.com/it/u=2270256597,1763841447&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
			// 			classify_id: 3,
			// 			goods_id: this.good_id,
			// 			goods_name: '帕拉梅拉',
			// 			introduce: '全民制作人们，大家好，我是练习时长两年半的，个人练习生蔡徐坤，喜欢唱 跳 rap 篮球。个人练习生蔡徐坤，喜欢唱 跳 rap 篮球',
			// 			pic: [
			// 				'https://img0.baidu.com/it/u=1049879630,2379204625&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
			// 				'https://img1.baidu.com/it/u=2003069733,4183563805&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
			// 				'https://img1.baidu.com/it/u=1219064615,2145656389&fm=253&fmt=auto&app=138&f=JPEG?w=906&h=500',
			// 				'https://img1.baidu.com/it/u=471237289,3922421785&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
			// 			],
			// 			price: 488888,
			// 			seller_id: 20,
			// 			seller_name: '有钱人',
			// 			time: new Date(),
			// 		},
			// 		success: res => {
			// 			console.log('添加物品成功', res);
			// 		},
			// 		fail: res => {
			// 			console.info('fail', res);
			// 		}
			// 	});
			// 	this.updateGoodId();
			// 	console.log("ed", this.good_id);
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.goodInput {
		margin-bottom: 20rpx;


	}

	.common-page-box {
		padding: 30rpx;
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #fff;
	}

	.form-item {
		height: 450rpx;
		margin-bottom: 20rpx;

		.input {
			height: 500rpx !important;
		}
	}

	.bottom-border {
		border-bottom: 1px solid #ccc;
	}

	.classify-item {
		margin-bottom: 20rpx;
	}

	.flex-form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.form-input {
		flex-grow: 1;
		box-sizing: border-box;
		padding-left: 30rpx;
	}

	.price-item {
		margin-bottom: 20rpx;
	}

	.btn-box {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 100%;

		.btn {
			width: 680rpx;
			height: 68rpx;
			text-align: center;
			line-height: 68rpx;
			color: #fff;
			background-color: #F57E53;
			margin: 0 auto;
			border-radius: 8rpx;
		}
	}
</style>
